import * as THREE from 'three'
import { stats } from '../stats'
import { gui } from '../gui'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// import { createMultiMaterialObject } from 'three/examples/jsm/utils/SceneUtils'

function createCourse23 (dom: HTMLElement) {
  const scene = new THREE.Scene()

  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 50, 1000)
  camera.position.set(140, 50, 140)

  const render = new THREE.WebGLRenderer()
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  const ctrlObj = {
    cameraNear: 50,
    cameraFar: 1000,
    index: 0,
    addCube: function () {
      const cubeGeom = new THREE.BoxGeometry(10, 10, 10)
      const cubeMaterial = new THREE.MeshDepthMaterial()
      const cube = new THREE.Mesh(cubeGeom, cubeMaterial)
      cube.position.x = 100 - 15 * this.index
      cube.position.y = 16
      cube.position.z = 100 - 15 * this.index
      scene.add(cube)
      this.index++
    }
  }

  const ctrl = gui
  ctrl.add(ctrlObj, 'addCube')

  ctrl.add(ctrlObj, 'cameraNear', 0, 50).onChange(function (e: number) {
    camera.near = e
    camera.updateProjectionMatrix()
  })

  ctrl.add(ctrlObj, 'cameraFar', 50, 1000).onChange(function (e: number) {
    camera.far = e
    camera.updateProjectionMatrix()
  })

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse23
}
